<template>
  <table-crud
    ref="tableCrud"
    :search-form="searchForm"
    search-label-width="100px"
    @on-load="loadData"
  >
    <template v-slot:header> demo </template>
    <template v-slot:search="search">
      <el-form-item ref="name" label="姓名" prop="name">
        <el-input
          v-model.trim="searchForm.name"
          placeholder="姓名"
          @keyup.enter="search.onSearch"
        />
      </el-form-item>
      <el-form-item label="林鲲三杰" prop="linkun">
        <el-select v-model="searchForm.linkun" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.typeCode"
            :label="item.typeName"
            :value="item.typeCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="林鲲卧龙" prop="wolong">
        <el-radio-group v-model="searchForm.wolong" placeholder="请选择">
          <el-radio
            v-for="(item, index) in options"
            :key="index"
            :label="item.typeCode"
          >
            {{ item.typeName }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="起止时间" prop="time">
        <el-date-picker
          v-model="searchForm.time"
          type="datetimerange"
          start-placeholder="Start Date"
          end-placeholder="End Date"
          :default-time="defaultTime"
          :value-format="elValueFormat"
        />
      </el-form-item>
    </template>
    <template v-slot:GXTable>
      <el-table ref="smallTable" v-loading="loading" stripe :data="tableData">
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        />
        <el-table-column label="姓名" width="50px" prop="name" align="center" />
      </el-table>
    </template>
  </table-crud>
</template>
<script>
import { reactive, toRefs, ref, onMounted } from "vue";
import axios from "@/utils/axios";
export default {
  name: "TenderProjectList",
  setup(props) {
    const tableCrud = ref(null);
    const state = reactive({
      loading: false,
      // 搜索
      searchForm: {
        name: "",
        linkun: "",
        wolong: "",
        time: "",
      },
      options: [
        { typeName: "刘锡兵", typeCode: "0001" },
        { typeName: "王凯", typeCode: "0002" },
        { typeName: "林华", typeCode: "0003" },
      ],
      elValueFormat: "YYYY-MM-DD HH:mm:ss",
      defaultTime: [
        new Date(2000, 1, 1, 9, 0, 0),
        new Date(2000, 1, 1, 17, 30, 0),
      ],
      tableData: [], // 列表数据
    });
    onMounted(() => {
      loadData();
    });
    const loadData = (params, callback) => {
      let httpOption = axios.post;
      httpOption("/api/admin/users", params)
        .then((res) => {
          state.loading = false;
          state.tableData = res.data;
          callback(res.meta.total);
        })
        .catch(() => {
          state.loading = false;
        });
    };
    return {
      ...toRefs(state),
      tableCrud,
      loadData,
    };
  },
};
</script>
<style lang="scss" scoped>
</style>
